<template>
  <div class="app-container">
    <!-- 头部搜索框 -->
    <div class="filter-container">
      <section class="sectin01" style="width: '300px'">
        <el-tag type="primary" style="margin-right: 10px; font-size: 16px"
          >申请时间</el-tag
        >
        <el-date-picker
          v-model="value7"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="time02()"
        ></el-date-picker>
      </section>
      <section class="sectin01">
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="renewIpAmountDetail_card_sync('search')"
          >查询</el-button
        >
      </section>
      <!-- <section class="sectin01">
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          @click="handleFilter"
          >全部续费</el-button
        >
      </section>
      <section class="sectin01">
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          @click="handleFilter01"
          >全部收款</el-button
        >
      </section> -->
    </div>
    <el-row :gutter="10">
      <el-col :span="15">
        <el-tag style="margin: 5px">
          <span>未收款 </span>
          <span style="margin-left: 20px"> 数量 :</span>
          <span style="font-weight: bold; color: red"
            >&nbsp;{{ count_ip }} </span
          >个
          <span style="margin-left: 20px"> 金额 :</span>
          <span style="font-weight: bold; color: red"
            >&nbsp;{{ money_ip }}
          </span>
        </el-tag>
        <el-table
          :key="tableKey"
          v-loading="listLoading01"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)"
          :data="cardConfig.renewIpAmountDetailList || [{}]"
          max-height="700"
          border
          highlight-current-row
          :row-class-name="tableRowClassName"
          :default-sort="{ prop: 'end_time', order: 'descending' }"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column label="小组" min-width="50" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.group_name }} | {{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="IP类型"
            min-width="50"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="IP"
            min-width="50"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.ip }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="到期时间"
            min-width="50"
            sortable
            prop="end_time"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.end_time | masDateFormat("yyyy-mm-dd") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="收款状态"
            min-width="50"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.is_receipt }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="续费状态"
            min-width="50"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.state }}</span>
              <!-- <span>{{ row.ip_renew }}</span> -->
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="100"
            class-name="end_times"
            align="center"
          >
            <template slot-scope="{ row }">
              <el-button
                type="text"
                v-if="row.is_receipt == '未收款'"
                @click="applyReceive(row.id, row.bank_user)"
                >已收续费款</el-button
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="9">
        <div class="right">
          <div class="head">
            <el-tag style="margin: 5px">
              <span>已续费清单 </span>
              <span style="margin-left: 20px"> 总计 :</span>
              <span style="font-weight: bold; color: red"
                >&nbsp;{{
                  (cardConfig.renewIpList_temp.total_amount || 0) +
                  (cardConfig.renewWxIpList_temp.total_amount || 0)
                }} </span
              >个
              <span style="margin-left: 20px"> 服务IP :</span>
              <span style="font-weight: bold; color: red"
                >&nbsp;{{
                  cardConfig.renewIpList_temp.total_amount || 0
                }} </span
              >个
              <!-- <span style="margin-left: 20px">微信IP :</span>
            <span style="font-weight: bold; color: red">{{
              cardConfig.renewWxIpList_temp.total_amount
            }}</span
            >个 -->
            </el-tag>
          </div>
          <div class="center">
            <div class="left">
              <el-table
                :key="tableKey"
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)"
                :data="cardConfig.renewIpList_temp.ipList || [{}]"
                max-height="700"
                border
                fit
                highlight-current-row
                :row-class-name="tableRowClassName"
                :default-sort="{ prop: 'end_time', order: 'descending' }"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  prop="id"
                  width="40"
                ></el-table-column>
                <el-table-column label="小组" min-width="50" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.group_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="IP类型" min-width="50" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.type }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="IP"
                  prop="add_time"
                  min-width="50px"
                  class-name="warn_time"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.ip }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="到期时间"
                  prop="end_time"
                  sortable
                  min-width="70px"
                  class-name="warn_time"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{
                      row.end_time | masDateFormat("yyyy-mm-dd")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="收款状态"
                  min-width="50px"
                  class-name="warn_time"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.is_receipt }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="续费状态"
                  prop="end_time"
                  min-width="50px"
                  class-name="warn_time"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.state }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex"
import {
  //五天内续费接口
  renewIpAmountDetail_card,
  renewReceive_card,
  encureRenewIp_card,
  encureAllRenewIp_card,
  encureRenewIpDetail_card,
  encureRenewWxIpDetail_card,
  renewAllReceive_card
} from "@/api/table"
import waves from "@/directive/waves"
import Pagination from "@/components/Pagination"

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    filterLongTime(status = "") {
      var str = status
      str = str.replace(/\d{2}:\d{2}:\d{2}/g, "")
      return str
    },
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      }
      return statusMap[status]
    },
    masDateFormat: function (msg = "", pattern = "") {
      var mt = new Date(msg)
      var y = mt.getFullYear()
      var m = (mt.getMonth() + 1).toString().padStart(2, "0")
      var d = mt.getDate().toString().padStart(2, "0")
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d
      }
      return y + "-" + m + "-" + d
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    },
  },
  computed: {
    ...mapState(["cardConfig"]),
  },
  data() {
    return {
      value7: [""],
      tableKey: 0,
      listLoading: false,
      listLoading01: false,
      count_ip: 0,
      money_ip: 0,
    }
  },
  created() {
    this.get_times() //获取时间
    this.renewIpAmountDetail_card() //获取五天续费详情列表
    this.encureRenewIpDetail_card() //查询已续费服务器ip
  },
  methods: {
    get_time() {
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let yy =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear()
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate()
      let hh = new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds()
      var value = yy + "-" + mm + "-" + dd
      var value01 = yy + "-" + mm + "-" + dd
      return [value, value01]
    },
    GetDateStr(AddDayCount) {
      var dd = new Date()
      dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
      var y = dd.getFullYear()
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1 //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate() //获取当前几号，不足10补0
      // console.log(y + "-" + m + "-" + d)
      return y + "-" + m + "-" + d
    },
    get_times() {
      this.value7 = [this.GetDateStr(-4), this.get_time()[1]]
    },
    // 请求接口方法
    renewIpAmountDetail_card_sync(sh) {
      this.listLoading01 = true
      this.$store.commit("renewIpAmountDetailList_card", [])
      this.encureRenewIpDetail_card()
      renewIpAmountDetail_card({
        start_time:
          this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 " ||
          this.get_time()[0],
        end_time:
          this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 " ||
          this.GetDateStr(4),
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        if (sh) {
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: res.msg,
            })
            this.listLoading01 = false
            this.$store.commit("renewIpAmountDetailList_card", res.data)
            this.count_ip = res.count
            this.money_ip = res.money
            // this.encureRenewIpDetail_card();
          } else {
            this.$message({
              type: "warning",
              message: res.msg,
            })
          }
        } else {
          this.$store.commit("renewIpAmountDetailList_card", res.data)
        }
      })
    },
    //获取已续费的IP,wxIP列表
    encureRenewIpDetail_card() {
      this.listLoading = true
      encureRenewIpDetail_card({
        start_time:
          this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 " ||
          this.GetDateStr(-4),
        end_time:
          this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 " ||
          this.get_time()[0],
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.$store.commit("getRenewIpAmount_card", res.data)
        this.listLoading = false
      })
    },
    encureRenewWxIpDetail_card() {
      encureRenewWxIpDetail_card({
        start_time: this.get_time()[0],
        end_time: this.GetDateStr(4),
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.$store.commit("getRenewWxIpAmount_card", res.data)
      })
    },
    renewIpAmountDetail_card() {
      this.$store.commit("renewIpAmountDetailList_card", [])
      this.listLoading01 = true
      renewIpAmountDetail_card({
        start_time: this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 ",
        end_time: this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 ",
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.$store.commit("renewIpAmountDetailList_card", res.data)
        this.listLoading01 = false
        this.count_ip=res.count
        this.money_ip=res.money
      })
    },
    time02() {
      if (this.value7) {
        this.$store.commit("serchTime_card", this.value7)
      } else {
        this.$store.commit("serchTime_card", ["", ""])
      }
    },
    handleFilter() {
      this.$confirm("确认该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          encureAllRenewIp_card({
            start_time: this.value7[0]+ " " + "00" + ":" + "00" + ":" + "00 ",
            end_time: this.value7[1]+ " " + "23" + ":" + "59" + ":" + "59 ",
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            // this.getData_card();
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              })
              this.renewIpAmountDetail_card() //获取当日详情
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },
    handleFilter01() {
      this.$confirm("确认该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          renewAllReceive_card({
            start_time: this.value7[0]+ " " + "00" + ":" + "00" + ":" + "00 ",
            end_time: this.value7[1]+ " " + "23" + ":" + "59" + ":" + "59 ",
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            // this.getData_card();
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              })
              this.renewIpAmountDetail_card() //获取当日详情
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },

    applyReceive(id, name) {
      this.$confirm("确认续费服务器吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          renewReceive_card({
            id: id,
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            // this.getData_card();
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              })

              this.renewIpAmountDetail_card() //重新获取续费列表
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },
    renewReceive(id, name) {
      this.$confirm("确认该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          encureRenewIp_card({
            id: id,
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            // this.getData_card();
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              })

              this.renewIpAmountDetail_card() //重新获取续费列表
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row"
      } else {
        return "success-row"
      }
    },
  },
}
</script>
<style lang='less' scoped>
/deep/.el-table td {
  padding: 6px 0px;
}
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.addserve {
  /deep/.el-input {
    width: 80%;
    text-align: center;
    font-weight: bold;
    color: red;
  }
}

.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.outtime {
  color: #f56c6c;
}

/deep/.el-table .red_ip {
  color: #f56c6c !important;
}
.tables {
  background-color: pink;
  height: 80%;
}
.app-container {
  overflow: hidden;
  padding-left: 10px;
  padding-top: 10px;
  .content {
    display: flex;
    .right {
      width: 30%;
    }
  }
}
/deep/.el-table {
  color: #000;
}
/deep/.el-dialog__body p {
  text-align: center;
}
</style>